<template>
  <scroll-view
    class="album_scroll_view"
    scroll-y
    @scrolltolower="handleToLower"
  >
    <!-- 实现轮播图 uni-app 标签，swiper -->
    <!-- 轮播开始 -->
    <view class="album_swiper">
      <swiper
        class="swiper"
        :indicator-dots="true"
        :autoplay="true"
        :circular="true"
      >
        <swiper-item v-for="item in banner" :key="item.id">
          <image :src="item.thumb" mode="" />
        </swiper-item>
      </swiper>
    </view>
    <!-- 轮播结束 -->
    <!-- 数据列表开始 navigator标签(页面链接)-->
    <view class="album-list">
      <navigator
        class="album_item"
        v-for="item in album"
        :key="item.id"
        :url="`/pages/album/index?id=${item.id}`"
      >
        <view class="album_iamge">
          <image :src="item.cover" mode="aspectFill" />
        </view>
        <view class="album_info">
          <view class="album_name" v-text="item.name"></view>
          <view class="album_desc" v-text="item.desc"></view>
          <view class="album_btn">
            <view class="album_attention">+ 关注</view>
          </view>
        </view>
      </navigator>
    </view>
    <!-- 数据列表结束 -->
  </scroll-view>
</template>

<script>
import goDetail from "@/components/goDetail";
export default {
  data() {
    return {
      // 请求参数
      params: {
        limit: 30,
        order: "new",
        skip: 0,
      },
      // 轮播图数组
      banner: [],
      // 列表数组
      album: [],
      // 是否有分页数据
      hasMore: true,
    };
  },
  methods: {
    /* 获取接口的数据 */
    getList() {
      this.request({
        url: "http://157.122.54.189:9088/image/v1/wallpaper/album",
        data: this.params,
      }).then((result) => {
        // console.log(result);
        if (result.res.album.length === 0) {
          this.hasMore = false;
          uni.showToast({
            title: "没有更多数据了哦",
            duration: 2000,
            icon: "none",
          });
          return;
        }
        if (this.banner.length === 0) {
          // 给轮播图数组赋值
          this.banner = result.res.banner;
        }
        // 给数据列表赋值
        this.album = [...this.album, ...result.res.album];
      });
    },
    /* 滚动条触底事件 */
    handleToLower() {
      // console.log("已到底部");
      if (this.hasMore) {
        this.params.skip += this.params.limit;
        this.getList();
      } else {
        uni.showToast({
          title: "已经没有数据了哦",
          duration: 2000,
          icon: "none",
        });
      }
    },
  },
  /* 组件的生命周期函数，监听组件的挂载(挂载到Vue)，并不能监听子组件的完全挂载 */
  mounted() {
    // 修改页面的标题(navigationBarTitleText)
    uni.setNavigationBarTitle({
      title: "专辑",
    });
    this.getList();
  },

  /* 注册组件 */
  components:{
    goDetail
  }
};
</script>

<style lang="scss" scope>
.album_scroll_view {
  height: calc(100vh - 36px);
}
.album_swiper {
  .swiper {
    height: calc(750rpx / 2.3);
    image {
      height: 100%;
    }
  }
}
.album-list {
  padding: 10rpx;
  .album_item {
    padding: 10rpx 0; // 上下10rpx 左右0
    display: flex; // 伸缩
    border-bottom: 1rpx solid #ccc; // 下边框
    .album_iamge {
      flex: 1;
      padding: 10rpx;
      image {
        width: 200rpx;
        height: 200rpx;
      }
    }

    .album_info {
      flex: 2;
      padding: 0 10rpx;
      overflow: hidden;
      .album_name {
        font-size: 30rpx;
        color: #000;
        padding: 10rpx 0;
      }

      .album_desc {
        padding: 10rpx 0;
        font-size: 24rpx;
        // 实现多余文字的隐藏效果
        text-overflow: ellipsis; // 截取多余文字
        overflow: hidden;
        white-space: nowrap; // 文本不会换行，文本会在在同一行上继续
      }

      .album_btn {
        padding-top: 50rpx;
        display: flex;
        justify-content: flex-end; // 靠右显示
        .album_attention {
          color: $color-text;
          border: 1rpx solid $color-text;
          padding: 10rpx;
        }
      }
    }
  }
}
</style>